<template>
    <div class="office-wrap" v-title :data-title="headTitle">
        <headerTop :title="headTitle">
            <div slot="headerRight" v-if="canModify">
                <div slot="headerRight" class="header-editor" @click="editorProject">编辑</div>
            </div>
        </headerTop>
        <div class="detail-project-name">
            <span class="detail-item-title">项目</span>
            <span class="detail-item-notice">项目名称</span>
            <span class="detail-item-content">
                {{projectName}}
            </span>
        </div>
        <div class="detail-project-name" v-if="repairStatus">
            <span class="detail-item-title">补报日期</span>
            <span class="detail-item-content">
                {{reportDate}}
            </span>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">整理</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">数量(公分)</span>
                    <span class="detail-right-content">{{info.zhengNum}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">补充描述</span>
                    <span class="detail-right-content">{{info.zhengMark}}</span>
                </div>
            </div>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">敲页码</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">数量(卷)</span>
                    <span class="detail-right-content">{{info.qiaoNum}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">数量(页)</span>
                    <span class="detail-right-content">{{info.qiaoPage}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">补充描述</span>
                    <span class="detail-right-content">{{info.qiaoMark}}</span>
                </div>
            </div>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">录入</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">数量(卷)</span>
                    <span class="detail-right-content">{{info.luNum}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">数量(条)</span>
                    <span class="detail-right-content">{{info.luTiao}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">补充描述</span>
                    <span class="detail-right-content">{{info.luMark}}</span>
                </div>
            </div>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">扫描</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">数量(卷)</span>
                    <span class="detail-right-content">{{info.scanNum}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">数量(页)</span>
                    <span class="detail-right-content">{{info.scanPage}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">补充描述</span>
                    <span class="detail-right-content">{{info.scanMark}}</span>
                </div>
            </div>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">装订</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">数量(件)</span>
                    <span class="detail-right-content">{{info.zhaungNum}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">补充描述</span>
                    <span class="detail-right-content">{{info.zhaungMark}}</span>
                </div>
            </div>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">装盒</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">数量(件)</span>
                    <span class="detail-right-content">{{info.heNum}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">补充描述</span>
                    <span class="detail-right-content">{{info.heMark}}</span>
                </div>
            </div>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">粘贴</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">数量(件)</span>
                    <span class="detail-right-content">{{info.zhanNum}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">补充描述</span>
                    <span class="detail-right-content">{{info.zhanMark}}</span>
                </div>
            </div>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">敲章</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">数量(件)</span>
                    <span class="detail-right-content">{{info.qiaoZhangNum}}</span>
                </div>
                <div class="line"></div>
                <div class="detail-rg">
                    <span class="detail-right-title">补充描述</span>
                    <span class="detail-right-content">{{info.qiaoZhangMark}}</span>
                </div>
            </div>
        </div>

        <div class="detail-item">
            <span class="detail-item-left">其他</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">其他描述</span>
                    <span class="detail-right-content">{{info.otherMark}}</span>
                </div>
            </div>
        </div>
        <div class="detail-item">
            <span class="detail-item-left">工作量</span>
            <div class="detail-right">
                <div class="detail-rg">
                    <span class="detail-right-title">工作量</span>
                    <span class="detail-right-content">{{info.workDay}}天</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import headerTop from "@/components/headerTop";
    import {dismissLoading, showLoading} from "@/utils/notify";

    export default {
        name: "officeFillRecord",
        components: {
            headerTop
        },
        data() {
            return {
                officeId:'',
                projectName:"",
                info: {
                    zhengNum: '',
                    zhengMark: '',
                    qiaoNum:'',
                    qiaoPage:'',
                    qiaoMark:'',
                    luNum:'',
                    luTiao:'',
                    luMark:'',
                    scanNum:'',
                    scanPage:'',
                    scanMark:'',
                    zhaungNum:'',
                    zhaungMark:'',
                    heNum:'',
                    heMark:'',
                    zhanNum:'',
                    zhanMark:'',
                    qiaoZhangNum:'',
                    qiaoZhangMark:'',
                    otherMark:'',
                    workDay:''
                },
                repairStatus:false,
                reportDate:'',
                canModify:false,
                projectType:'',
                headTitle:''
            }
        },
        methods: {
            editorProject() {
                this.$router.push({
                    name: 'projectArch',
                    query:{
                        infoId:this.officeId,
                        type:this.repairStatus?100:0,
                        projectType:this.projectType,
                        modifyByManager:0
                    }
                })
            },
            getRecordById(){
                showLoading("获取中...")
                let params = {
                    infoId: this.officeId
                }
                let callBack = (res) => {
                    this.projectName=res.projectName
                    this.reportDate=res.reportDate
                    this.canModify=res.canModify
                    this.projectType=res.reportType
                    this.info.workDay=res.workDay
                    if(res.reportData.zl){
                        this.info.zhengNum=res.reportData.zl.num?res.reportData.zl.num:''
                        this.info.zhengMark=res.reportData.zl.text
                    }
                    if(res.reportData.qym){
                        this.info.qiaoNum=res.reportData.qym.num?res.reportData.qym.num:''
                        this.info.qiaoPage=res.reportData.qym.subNum?res.reportData.qym.subNum:''
                        this.info.qiaoMark=res.reportData.qym.text
                    }
                    if(res.reportData.lr){
                        this.info.luNum=res.reportData.lr.num?res.reportData.lr.num:''
                        this.info.luTiao=res.reportData.lr.subNum?res.reportData.lr.subNum:''
                        this.info.luMark=res.reportData.lr.text
                    }
                    if(res.reportData.sm){
                        this.info.scanNum=res.reportData.sm.num?res.reportData.sm.num:''
                        this.info.scanPage=res.reportData.sm.subNum?res.reportData.sm.subNum:''
                        this.info.scanMark=res.reportData.sm.text
                    }
                    if(res.reportData.zd){
                        this.info.zhaungNum=res.reportData.zd.num?res.reportData.zd.num:''
                        this.info.zhaungMark=res.reportData.zd.text
                    }
                    if(res.reportData.zh){
                        this.info.heNum=res.reportData.zh.num?res.reportData.zh.num:''
                        this.info.heMark=res.reportData.zh.text
                    }
                    if(res.reportData.zt){
                        this.info.zhanNum=res.reportData.zt.num?res.reportData.zt.num:''
                        this.info.zhanMark=res.reportData.zt.text
                    }
                    console.log(res.reportData.qz)
                    if (res.reportData.qz){
                        this.info.qiaoZhangNum=res.reportData.qz.num?res.reportData.qz.num:''
                        this.info.qiaoZhangMark=res.reportData.qz.text?res.reportData.qz.text:''
                    }
                    if(res.reportData.qt){
                        this.info.otherMark=res.reportData.qt.text
                    }
                    dismissLoading()
                }
                let errback=()=>{
                    dismissLoading()
                }
                this.$request('POST', "/api/mobile/report/find", params, callBack,this,errback)
            }
        },
        mounted() {
            if (this.$route.query.type>0){
                this.repairStatus=true;
            }
            if (this.$route.query.projectType) {
                this.projectType = this.$route.query.projectType
                if (this.projectType=='account'){
                    this.headTitle="会计档案详情"
                }else if (this.projectType=='capital'){
                    this.headTitle="基建档案详情"
                }else if (this.projectType=='project'){
                    this.headTitle="工程档案详情"
                }else if (this.projectType=='business'){
                    this.headTitle="业务档案详情"
                }
            }
            if (this.$route.query.projectId){
                this.officeId=this.$route.query.projectId
                this.getRecordById()
            }
        }
    }
</script>

<style scoped lang="scss">
    .office-wrap {
        min-height: 100vh;
        background: $page-bg;
        padding-top: $header-top;
        box-sizing: border-box;
        .detail-project-name{
            background: white;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 10px 12px;
            box-sizing: border-box;

            .detail-item-title{
                width: 58px;
                font-size: 15px;
                color: #007CF9;
                flex-shrink: 0;
            }
            .detail-item-notice{
                color: #646566;
                font-size: 15px;
                width: 88px;
                flex-shrink: 0;
            }
            .detail-item-content{
                flex: 1;
                color: #323233;
                font-size: 15px;
                word-break: break-all;
            }
        }

        .detail-item{
            background: white;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 10px 12px;
            box-sizing: border-box;
            margin-top: 5px;
            .detail-item-left{
                width: 58px;
                font-size: 15px;
                color: #007CF9;
                flex-shrink: 0;
            }
            .detail-right{
                flex: 1;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                .line{
                    width: 100%;
                    height: 1px;
                    background: #ebedf0;
                    opacity: .5;
                    margin: 5px 0;
                }

                .detail-rg{
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    .detail-right-title{
                        display: inline-block;
                        color: #646566;
                        font-size: 15px;
                        width: 88px;
                        flex-shrink: 0;
                    }
                    .detail-right-content{
                        flex: 1;
                        color: #323233;
                        font-size: 15px;
                        word-break: break-all;
                    }
                }
            }

        }
    }
</style>